<template>
  <MultiStepForm ref="multiStepForm" :steps="steps">
    <template v-for="step in steps" :key="step.number" v-slot:[`step${step.number}`]>
      <component :is="step.component"></component>
    </template>
  </MultiStepForm>
</template>
<script setup>
import { ref } from 'vue';
import MultiStepForm from './MultiStepForm.vue';

const steps = ref([
  {
    label: 'Company',
    number: 1,
    valid: false,
    skip: false,
    status: 'current',
    component: Company
  },
  {
    label: 'Password',
    number: 2,
    valid: false,
    skip: false,
    status: 'upcoming',
    component: Password
  }
])//https://stackoverflow.com/questions/77317915/using-dynamic-slots-and-dynamic-components
</script>